
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>同构渲染 · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Wing-It-Like-a-Pro.html" />
    
    
    <link rel="prev" href="Lazy-loaded-entry-points.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >同构渲染</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>So the great thing about React JS is that it runs on the server too. But that does not mean you can just create any app and run it on the server. You have to make some decisions on the architecture. The reason is that even though React JS and the components run on the server, you might be having dependencies in those components that does not run on the server.</p>
<p>React Js &#x6700;&#x4F1F;&#x5927;&#x7684;&#x5730;&#x65B9;&#x662F;&#x5B83;&#x4E5F;&#x53EF;&#x4EE5;&#x8FD0;&#x884C;&#x5728;&#x670D;&#x52A1;&#x7AEF;&#xFF0C;&#x4E0D;&#x8FC7;&#x8FD9;&#x4E0D;&#x610F;&#x5473;&#x7740;&#x4F60;&#x53EF;&#x4EE5;&#x521B;&#x5EFA;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;&#x5E94;&#x7528;&#x7136;&#x540E;&#x8FD0;&#x884C;&#x5728;&#x670D;&#x52A1;&#x7AEF;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x505A;&#x4E00;&#x4E9B;&#x51B3;&#x7B56;&#x548C;&#x67B6;&#x6784;&#x3002;&#x539F;&#x56E0;&#x662F;&#x54EA;&#x6015; React JS &#x548C;&#x4E00;&#x4E9B;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x5728;&#x670D;&#x52A1;&#x7AEF;&#x8FD0;&#x884C;&#xFF0C;&#x4F46;&#x8FD8;&#x662F;&#x6709;&#x4E00;&#x4E9B;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#x4E0D;&#x80FD;&#x5728;&#x670D;&#x52A1;&#x7AEF;&#x8FD0;&#x884C;&#x3002;</p>
<h2 id="&#x6CE8;&#x5165;&#x72B6;&#x6001;">&#x6CE8;&#x5165;&#x72B6;&#x6001;</h2>
<p>One of the most important decisions you make is to inject the state of your application through the top component. This basically means that your components does not have any external dependencies at all. All they need to know comes through this injected state.</p>
<p>&#x4E00;&#x4E2A;&#x91CD;&#x8981;&#x7684;&#x4E8B;&#x60C5;&#x662F;&#x5E94;&#x7528;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x9876;&#x5C42;&#x7EC4;&#x4EF6;&#x628A;&#x72B6;&#x6001;&#x6CE8;&#x5165;&#xFF0C;&#x8FD9;&#x610F;&#x5473;&#x7740;&#x4F60;&#x7684;&#x7EC4;&#x4EF6;&#x6CA1;&#x6709;&#x4E86;&#x4EFB;&#x4F55;&#x7684;&#x5916;&#x90E8;&#x4F9D;&#x8D56;&#xFF0C;&#x4ED6;&#x4EEC;&#x53EA;&#x80FD;&#x901A;&#x8FC7;&#x6CE8;&#x5165;&#x7684;&#x72B6;&#x6001;&#x6765;&#x83B7;&#x53D6;&#x4FE1;&#x606F;&#x3002;</p>
<p>This cookbook is not about isomorphic apps, but let us take a look at an example. We will not use ES6 syntax here because Node JS does not support it yet.</p>
<p>&#x8FD9;&#x672C;&#x5C0F;&#x4E66;&#x4E0D;&#x662F;&#x4E3B;&#x8981;&#x8BB2;&#x540C;&#x6784;&#x6E32;&#x67D3;&#x7684;&#x5E94;&#x7528;&#xFF0C;&#x4E0D;&#x8FC7;&#x8BA9;&#x6211;&#x4EEC;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#x4F8B;&#x5B50;&#xFF0C;&#x6211;&#x4EEC;&#x8FD9;&#x6B21;&#x4E0D;&#x4F7F;&#x7528; ES6 &#x8BED;&#x6CD5;&#x4E86;&#xFF0C;&#x56E0;&#x4E3A; Node JS &#x8FD8;&#x4E0D;&#x5B8C;&#x5168;&#x652F;&#x6301;&#x3002;</p>
<p><em>main.js (client)</em></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;react&apos;</span>);
<span class="hljs-keyword">var</span> AppState = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./client/AppState.js&apos;</span>);
<span class="hljs-keyword">var</span> App = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./App.js&apos;</span>);

React.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span> <span class="hljs-attr">state</span>=<span class="hljs-string">{AppState}</span>/&gt;</span>, document.body);
</span></code></pre>
<p><em>router.js (server)</em></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;react&apos;</span>);
<span class="hljs-keyword">var</span> App = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./App.js&apos;</span>);
<span class="hljs-keyword">var</span> AppState = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./server/AppState.js&apos;</span>);
<span class="hljs-keyword">var</span> index = <span class="hljs-string">&apos;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;{{component}}&lt;/body&gt;&lt;/html&gt;&apos;</span>;

app.get(<span class="hljs-string">&apos;/&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
  <span class="hljs-keyword">var</span> componentHtml = React.renderToString(App({state: AppState}));
  <span class="hljs-keyword">var</span> html = index.replace(<span class="hljs-string">&apos;{{component}}&apos;</span>, componentHtml);
  res.type(<span class="hljs-string">&apos;html&apos;</span>);
  res.send(html);
});
</code></pre>
<p>So this was a very naive and simple way of showing it, but what you should notice here is that we use the same <strong>App.js</strong> file on the client and server, but we have two different ways of producing the state.</p>
<p>&#x6240;&#x4EE5;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x975E;&#x5E38;&#x521D;&#x7EA7;&#x4E14;&#x7B80;&#x5355;&#x7684;&#x4F8B;&#x5B50;&#x6765;&#x5C55;&#x793A;&#x5B83;&#xFF0C;&#x4E0D;&#x8FC7;&#x4F60;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#x6211;&#x4EEC;&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#x548C;&#x670D;&#x52A1;&#x7AEF;&#x4F7F;&#x7528;&#x4E86;&#x540C;&#x4E00;&#x4E2A; <strong>App.js</strong>&#xFF0C;&#x4F46;&#x662F;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x6765;&#x63D0;&#x4F9B;&#x72B6;&#x6001;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Lazy-loaded-entry-points.html" class="navigation navigation-prev " aria-label="Previous page: 懒加载入口文件">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Wing-It-Like-a-Pro.html" class="navigation navigation-next " aria-label="Next page: 进阶">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"同构渲染","level":"1.5.6","depth":2,"next":{"title":"进阶","level":"1.6","depth":1,"path":"Wing-It-Like-a-Pro.md","ref":"Wing-It-Like-a-Pro.md","articles":[{"title":"优化开发","level":"1.6.1","depth":2,"path":"Optimizing-development.md","ref":"Optimizing-development.md","articles":[]},{"title":"热加载组件","level":"1.6.2","depth":2,"path":"Hot-loading-components.md","ref":"Hot-loading-components.md","articles":[]},{"title":"使用下一代 JavaScript","level":"1.6.3","depth":2,"path":"JavaScript-next.md","ref":"JavaScript-next.md","articles":[]},{"title":"优化缓存","level":"1.6.4","depth":2,"path":"Optimizing-caching.md","ref":"Optimizing-caching.md","articles":[]},{"title":"匹配器","level":"1.6.5","depth":2,"path":"Matchers.md","ref":"Matchers.md","articles":[]},{"title":"懒加载入口","level":"1.6.6","depth":2,"path":"Lazy-loading-entry-points.md","ref":"Lazy-loading-entry-points.md","articles":[]},{"title":"创建一个复用代码","level":"1.6.7","depth":2,"path":"Creating-a-common-bundle.md","ref":"Creating-a-common-bundle.md","articles":[]},{"title":"理解 Chunks","level":"1.6.8","depth":2,"path":"Understanding-chunks.md","ref":"Understanding-chunks.md","articles":[]},{"title":"创建库","level":"1.6.9","depth":2,"path":"Authoring-libraries.md","ref":"Authoring-libraries.md","articles":[]}]},"previous":{"title":"懒加载入口文件","level":"1.5.5","depth":2,"path":"Lazy-loaded-entry-points.md","ref":"Lazy-loaded-entry-points.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Isomorphic-app.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

